<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">设备基础信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="设备名称">{{
              datas?.no
            }}</a-descriptions-item>
            <a-descriptions-item label="设备编码">
              {{ datas?.customer_status_id }}
            </a-descriptions-item>
            <a-descriptions-item label="品牌">{{ datas?.city_id }}</a-descriptions-item>
            <a-descriptions-item label="设备型号">{{
              datas?.name
            }}</a-descriptions-item>
            <a-descriptions-item label="保修状态"
              >{{ datas?.date }}</a-descriptions-item
            >
            <a-descriptions-item label="报名截止日期">
              {{ datas?.warranty_status }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">资产信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="资产编号">{{
              datas?.customer_type_id
            }}</a-descriptions-item>
            <a-descriptions-item label="使用地点">{{
              datas?.warranty_end_date
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <!-- <div class="detail-column">
        <div class="column-title">关联实验</div>
        <div class="column-content">
          <a-descriptions bordered :column="1" :labelStyle="{ width: '120px' }">
            <a-descriptions-item
              :label="`关联实验${index + 1}`"
              v-for="(item, index) in orderList"
            >
              {{
                item?.duty
              }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">保修记录</div>
        <div class="column-content">
           <a-table
        class="table-box"
        row-key="index"
        :columns="columns"
        :dataSource="tableData"
        :row-class-name="
          (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        sticky
        :scroll="{ y: true, x: 1100 }"
        :pagination="pagination"
        @change="onChange"
      >
        <template #bodyCell="{ column, record }">
            <a-button type="link" class="link" @click="handleDetail(record)">
              查看详情
            </a-button>
          </template>
      </a-table>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import API from "@/api/operation";
import SAPI from "@/api/system";
import { useRoute } from "vue-router";
import { getCityName } from "@/utils/city.ts";
const columns = ref([
  {
    dataIndex: "no",
    title: "报修单号",
    width: 240,
  },
  {
    dataIndex: "name",
    title: "报修时间",
    ellipsis: true,
    width: 110,
  },
  {
    dataIndex: "customer_type_id",
    title: "报修人",
    width: 110,
  },
  {
    dataIndex: "city_id",
    title: "报修账号",
    width: 150,
  },
  {
    dataIndex: "customer_status_id",
    title: "故障描述",
    width: 110,
   
  },
  {
    dataIndex: "orders",
    title: "处理时间",
    width: 110,
  },
  {
    dataIndex: "dealer_id",
    title: "报修状态",
    width: 150,
  },
  {
    dataIndex: "orders",
    title: "处理结果",
    width: 110,
  },
  {
    dataIndex: "operation",
    title: "操作",
    width: 100,
    align: "center",
    fixed: "right",
  },
]);
const route = useRoute();
const query = computed(() => route.query);
const handleCopy = (text) => {
  navigator.clipboard.writeText(text);
};
const classOptions = ref([]);
const getTypeOptions = async () => {
  const res = await API.CustomerTypeOptions({});
  classOptions.value = res;
};
const zoneoList = ref([]);
const getZoneData = async () => {
  const res = await SAPI.CityCityTree();
  zoneoList.value = res;
};
const statusOptions = ref([]);
const getStatusOptions = async () => {
  const res = await API.CustomerStatusOptions({});
  statusOptions.value = res;
};
const dealerList = ref([]);
const getDealerOptions = async () => {
  const res = await API.DealerOptions({});
  dealerList.value = res;
};
const datas = ref();
const getData = async () => {
  let params = {
    customer_id: query.value.id,
  };
  const res = await API.CustomerFetchModel(params);
  datas.value = res;
  //通过城市id递归找到省市名称
  let list = zoneoList.value;
  datas.value.zone_name = getCityName(list, datas.value.city_id);
};
const orderList = ref([]);
const getOrderData = async () => {
  let params = {
    customer_idArray: [query.value.id],
  };
  const res = await API.OrderContractPagedList({ args: params });
  orderList.value = res?.data;
};
const orderStatusOptions = ref([]);
const getOrderStatusOptions = async () => {
  const res = await API.OrderStatusOptions({});
  orderStatusOptions.value = res;
};
const visible = ref(false);
const setVisible = (value) => {
  visible.value = value;
};
const seePhone = ref(false);
const seePhone2 = ref(false);
const handleChangeSee = (type) => {
  if (type === 1) {
    console.log("手机号");
    seePhone.value = !seePhone.value;
  } else if (type === 2) {
    console.log("联系电话");
    seePhone2.value = !seePhone2.value;
  }
};
onMounted(async () => {
  datas.value = query.value
  // await getTypeOptions();
  // await getZoneData()
  // await getStatusOptions();
  // await getDealerOptions();
  // await getData();
  // await getOrderStatusOptions();
  // await getOrderData();
});
</script>
